@import "../../../base/base";
@import "~pofod/base/base";
@prefix:strategy;
.@{prefix}-container {
  min-height: 800px;
  background: url("./img/banner.jpg") no-repeat center;
  background-size: cover;
  .@{prefix} {
    color:#fff;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    .max-media(1200px, { padding-bottom: 20px; });
    position: relative;
    .@{prefix}-content-box{
      position: absolute;
      left: 0;
      top: 45%;
      .translate(0,-50%);
      .max-media(1200px, { padding:0 10px; });
    }
    #@{prefix}-content {
      text-indent: 0;
      width: 50%;
      float: left;
      padding-top: 80px;
      .max-media(1024px, { float: none; width: 100%; padding-top: 20px; });
      h1{
        color: #fff;
        font-size: 36px;
        position: relative;
        margin-bottom: 30px;
        .max-media(600px,{
          font-size: 28px;
        });
        &:after{
          position: absolute;
          content: "";
          background: #fff;
          width: 100px;
          height: 5px;
          left: 0px;
          bottom: -15px;
          .translate(0,-50%);
        }
      }
    }
    .@{prefix}-img-container {
      float: right;
      position: relative;
      width: 50%;
      text-align: center;
      height: 346px;
      .max-media(1024px, { float: none; width: 100%; margin-top: 20px; });
      .max-media(460px, { height: auto; });
      img {
        height: 100%;
        margin: 0 !important;
        .max-media(460px, { width: 80%; height: auto; });
      }
      .@{prefix}-strategy1, .@{prefix}-strategy2, .@{prefix}-strategy3 {
        position: absolute;
        top: 50%;
        .translate(0, -50%)
      }
      .@{prefix}-strategy1 {
        left: 45%;
        //-webkit-animation: 5s letRotate linear infinite;
        //-o-animation: 5s letRotate linear infinite;
        //animation: 5s letRotate linear infinite;
      }
      .@{prefix}-strategy2 {
        left: 33%;
        //transform-origin: 49% 49%;
        //-webkit-animation: 5s changeRotate linear infinite;
        //-o-animation: 5s changeRotate linear infinite;
        //animation: 5s changeRotate linear infinite;
      }
      .@{prefix}-strategy3 {
        left: 5%;
      }
    }
  }
;
  .keyframes(all, changeRotate, { .animationContent() });
  .keyframes(all, letRotate, { .letRotate() });
  .transform(@x,@y,@deg) {
    -webkit-transform: translate(@x, @y) rotate(@deg);
    -moz-transform: translate(@x, @y) rotate(@deg);
    -ms-transform: translate(@x, @y) rotate(@deg);
    -o-transform: translate(@x, @y) rotate(@deg);
    transform: translate(@x, @y) rotate(@deg);
  }
  .animationContent() {
    0% {
      .transform(0, -50%, 0deg);
    }
    50% {
      .transform(0, -50%, 180deg);
    }
    100% {
      .transform(0, -50%, 360deg);
    }
  }
  .letRotate() {
    0% {
      .transform(0, -50%, 0deg);
    }
    50% {
      .transform(0, -50%, -180deg);
    }
    100% {
      .transform(0, -50%, -360deg);
    }
  }
}